<template>
  <view class="container">
    <sc-navbar back title="详情"></sc-navbar>
    <glo-gutter>
      <view class="detail-info">
        <glo-title :title="detailData.toolGroupName"></glo-title>
        <sc-flex ai="center" col-gap="34" mt="8">
          <sc-image src="/static/imgs/empty.png" width="90" height="90"></sc-image>
          <glo-info :info="getMainInfo(detailData)"></glo-info>
        </sc-flex>
        <sc-grid row="auto" row-gap="6" mt="15">
          <glo-title title="拍摄/上传主图"></glo-title>
          <sc-text text="上传图片确保清晰,确保清晰，信息完整，最多上传1张" size="19" color="#767676"></sc-text>
          <glo-upload :maxCount="9"></glo-upload>
        </sc-grid>
      </view>
      <sc-view pl="30">
        <glo-search placeholder="请输入关键字搜素" @search="handleSearch"></glo-search>
      </sc-view>
      <glo-chunk v-for="item in detailData.toolProductManagementDOList" :key="item.id" @click="handleUpload(item)">
        <view class="equipment-num">10</view>
        <sc-flex ai="center" jc="between">
          <sc-flex ai="center" col-gap="22">
            <glo-title title="软钻"></glo-title>
            <glo-tag text="未训练"></glo-tag>
          </sc-flex>
          <sc-text bold color="#2E82FF" size="19" text="上传素材"></sc-text>
        </sc-flex>
        <sc-flex ai="center" col-gap="34" mt="10">
          <sc-image height="90" src="/static/imgs/empty.png" width="90"></sc-image>
          <glo-info :info="getItemInfo(item)"></glo-info>
        </sc-flex>
      </glo-chunk>
    </glo-gutter>
  </view>
</template>
<script setup>
import { reactive } from 'vue';

const getMainInfo = (data) => [
  {
    type: 'single',
    label: "工具组编码",
    value: data.toolGroupName,
  },
  {
    type: 'single',
    label: "工具组条码",
    value: data.toolGroupCode,
  },
  {
    type: 'single',
    label: "所含数量",
    value: data.toolGroupNum,
  }
]
const getItemInfo = (item) => [
  {
    type: 'single',
    label: "工具编码",
    value: item.toolCode,
  },
  {
    type: 'single',
    label: "规格型号",
    value: item.specifications,
  },
  {
    type: 'multiple',
    columns: '1fr 1fr',
    list: [{
      type: 'single',
      label: "厂家编码",
      value: item.manufacturerCode || '-',
    },
    {
      type: 'single',
      label: "品牌",
      value: item.brandName,
    },]
  },
  {
    type: 'single',
    label: "生产厂家",
    value: item.manufacturerName || '-',
  },
]
const detailData = ref({});
const handleSearch = (keyword) => {
  console.log(keyword);
}
const handleUpload = (item) => {
  uni.navigateTo({
    url: `/subGongJuZu/pages/material?id=${item.id}`,
  });
}

onLoad(({ id }) => {
  _api.getGongJuZuDetail(id).then((res) => {
    detailData.value = res;
    console.log("🚀 >>>  detailData.value:", detailData.value)
  })
})
</script>
<style lang="scss">
page {
  background: $color-bg;
}
</style>
<style lang="scss" scoped>
.detail-info {
  padding: 17rpx 25rpx;
  background: #ffffff;
  border-radius: 15rpx;
}

.equipment-num {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 32rpx;
  height: 19rpx;
  background: #FF5050;
  border-radius: 0 0 0 100rpx;
  font-size: 11rpx;
  color: #fff;
  text-align: center;
}
</style>
